<template>
  <div>
    <el-drawer :before-close="beforeClose" :title="model|modelTitle" :visible.sync="myValue" direction="rtl" size="30%">
      <el-divider></el-divider>
      <div class="py-2 px-5">
        <el-form ref="formData" :disabled="disabled" :model="formData" size="small" label-width="120px">

          <el-form-item label="分组名称" prop="groupName" :rules="[{ required: true, message: '分组名称不能为空'}]">
            <el-input placeholder="请输入分组名称" v-model="formData.groupName"></el-input>
          </el-form-item>

          <el-form-item label="备注" prop="remarks">
            <el-input v-model="formData.remarks"></el-input>
          </el-form-item>

          <el-divider content-position="center">所拥有的权限</el-divider>

          <el-tree check-strictly @check="handleNodeClick" :data="menuTree" show-checkbox node-key="id"
            default-expand-all :default-checked-keys="formData.permission" :props="{ children: 'children',label: 'menuName'}">
          </el-tree>
          <el-form-item class="mt-4">
            <el-button size="medium" type="primary" @click="submitForm('formData')">提交</el-button>
            <el-button size="medium" @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import form from '@/mixins/form.js'

export default {
  mixins: [form],
  props: {
    value: {
      type: Boolean
    }
  },
  data () {
    return {
      myValue: false,
      disabled: false,
      rowId: 0,
      model: 'add',

      menuTree: [],//权限树结构

      formData: {
        groupName: '',
        permission: []
      }
    }
  },
  watch: {
    // 显示
    value (newVal) {
      this.myValue = newVal
    },
    myValue (newVal) {
      this.$emit('input', newVal)
    }
  },
  computed: {
    modelTitle () {
      switch (this.model) {
        case 'add':
          return '新增数据'
          break
        case 'edit':
          return '修改数据'
          break
        case 'details':
          return '查看数据'
          break
      }
    },
  },
  methods: {
    // 点击
    handleNodeClick (checks, { checkedKeys }) {
      this.formData.permission = checkedKeys
    },
    // 获取该条数据信息
    async fetchRow (model, id = 0) {
      const menuTree = await this.$http.get(this.$api.menuTree)
      this.menuTree = menuTree.data
      let rowResult = {}
      this.model = model
      this.rowId = id
      switch (model) {
        // 添加
        case 'add':
          this.disabled = false
          break
        case 'edit':
          this.disabled = false
          rowResult = await this.$http.get(`${this.$parent.api}/${this.rowId}`)
          this.formData = rowResult.data
          this.formData.permission = rowResult.data.permission.split(',')
          break
        case 'details':
          this.disabled = true
          rowResult = await this.$http.get(`${this.$parent.api}/${this.rowId}`)
          this.formData = rowResult.data
          this.formData.permission = rowResult.data.permission.split(',')
          break
      }
    },

  },

}
</script>

